<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 200px;" placeholder="用户id" />
      <!-- <el-input v-model="listQuery.content" clearable class="filter-item" style="width: 200px;" placeholder="请输入内容" /> -->
      <el-button v-permission="['GET /admin/userMsg/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
      <el-button v-permission="['POST /admin/userMsg/createSms']" class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="用户id" prop="userId"/>
      <el-table-column align="center" label="信息内容" prop="content" />
      <el-table-column align="center" label="类型" prop="type">
        <template slot-scope="scope">
          <el-tag >{{ msgType[scope.row.type - 1] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发送时间" prop="addTime" />
      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/userMsg/delete']" type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- 新增 -->
    <el-dialog :title="发送消息" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="margin-left:50px;">
        <el-form-item label="会员：">
          <el-select v-model="dataForm.userId" placeholder="请选择会员名称">
            <el-option v-for="item in memberOptions" :key="item.userId" :value="item.userId" :label="item.surName+item.userName" />
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="content">
          <el-select v-model="dataForm.type" placeholder="请选择" @change="changeType()">
            <el-option :value="1" label="短信" />
            <el-option :value="2" label="邮件" />
          </el-select>
        </el-form-item>
        <el-form-item style="width:400px" v-if="dataForm.type == '2'" label="主题" prop="theme">
          <el-input v-model="dataForm.theme" />
        </el-form-item>
        <el-form-item style="width:400px" v-if="dataForm.type == '1'" label="短信内容" prop="content">
          <el-input v-model="dataForm.content" />
        </el-form-item>
        <el-form-item style="width:600px" v-if="dataForm.type == '2'" label="邮件内容" prop="content">
          <!-- <el-input v-model="dataForm.content" /> -->
          <!-- <div style="width:500px">
            <VueUeditorWrap
              v-model="dataForm.content"
              :config="editorConfig"
              @ready="ready"
            />
          </div> -->
          <div id="editorice"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  import { listSms,createSms,deleteSms } from '@/api/userSms'
  import { getUser } from '@/api/order'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
    name: 'sendSms',
    components: { Pagination,VueUeditorWrap },
    data() {
      return {
        editorConfig: {
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%',
          UEDITOR_HOME_URL: '/UEditor/',
          // 上传文件接口, 报错属于正常，若需要验 证可使用(也是盗大神的)http://35.201.165.105:8000/controller.php
          // 调试完毕打包上线则切换回/static/UEditor/php/controller.php即可，不用做其他处理
          // serverUrl: '/static/UEditor/php/controller.php',
          serverUrl:"http://xfzw.qianyingapp.com/shop_admin/admin/storage/create"
        },
        msgType: ['短信', '邮件'],
        memberForm: {
          member: ''
        }, // 地址会员搜索表单
        memberOptions: [
        ], // 会员选择下拉框赋值
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          userId: undefined
        },
        rules: {
          userId: [
            { required: true, message: '用户不能为空', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '内容不能为空', trigger: 'blur' }
          ],
          type: [{ required: true, message: '类型不能为空', trigger: 'blur' }]
        },
        dataForm: {
          theme: "",
          userId: undefined,
          content: undefined,
          type: undefined,
        },
        dialogFormVisible: false,
        dialogStatus: '',
        editorbox:null
      }
    },
    created() {
      this.getList()
    },
    mounted() {
      this.gethuiyuan()
    },
    methods: {
      ready(editorInstance) {
        // 这里可以拿到ueditor的实例，比如editorInstance.getContent()就可以拿到编辑器的html内容
        // this.evtHub.$emit('editor.data', editorInstance);
        console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
      },
      changeType(){
        if(this.dataForm.type == 2){
          this.createEditor()
        }
      },
      createEditor(){
        this.editorbox = null
        if(this.dataForm.type == 2){
          setTimeout(() => {
            this.editorbox = new ice.editor("editorice");
            if(this.dataForm.content == '' || this.dataForm.content == null || this.dataForm.content == undefined){

            }else{
              this.editorbox.setValue(this.dataForm.content);
            }
            //第二步：配置图片或附件上传提交表单的路径
            this.editorbox.uploadUrl="http://www.hometasty.info/demo/up.php";
          }, 1000);
        }
      },
      gethuiyuan() {
        getUser().then(response => {
          if (response.data.errno == 0) {
            this.memberOptions = response.data.data.list
          } else {
            this.memberOptions = []
          }
        })
      },
      getList() {
        this.listLoading = true
        listSms(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      resetForm() {
        this.dataForm = {
          theme: undefined,
          userId: undefined,
          content: undefined,
          type: undefined,
        }
      },
      handleCreate() {
        this.resetForm()
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        if(this.dataForm.type == 2){
          this.dataForm.content = this.editorbox.getHTML()
        }
        this.$refs['dataForm'].validate(valid => {
          if (valid) {

            createSms(this.dataForm)
              .then(response => {
                this.dialogFormVisible = false
                this.$notify.success({
                  title: '成功',
                  message: '创建成功'
                })
                this.getList()
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.data.errmsg
                })
              })
          }
        })
      },
      handleDelete(row) {
        deleteSms(row).then(response => {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.getList()
        })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      }
    }
  }
</script>
